<template>
    <div class="overview">
        <h2 class="title">
        Your Car's Talking to You. We Just Tell You How to Listen
      </h2>
      <div class="content">
        <div class="img">
          <img src="/overview01.png" alt="" />
          <img src="/overview02.png" alt="" />
          <img src="/overview03.png" alt="" />
        </div>
        <div class="text">
          <div class="item">
            <h3>SPARQ A.I.</h3>
            <p>Talk Directly With Your Car.</p>
            <p>
              Turn your car into a personalized AI that can tell you directly
              about its needs. Ask SPARQ AI any questions about your vehicle. It
              can instantly diagnose issues with your vehicle through an image
              or sound.
            </p>
          </div>
          <div class="item">
            <h3>Timelapse</h3>
            <p>Your Vehicle History As Complete As Your Family Tree</p>
            <p>
              Timelapse creates a detailed timeline of your vehicle’s service
              history, repairs, inspections, and driving patterns. Easily track
              every moment in your car’s life, from day one to now, just like a
              digital diary for your vehicle.
            </p>
          </div>
          <div class="item">
            <h3>On-Demand Diagnostics</h3>
            <p>Perform 50K+ Inspections Anytime, Anywhere.</p>
            <p>
              Unlock the power to run 50,000 diagnostic checks and live updates
              at your fingertips. Get ahead of potential issues with alerts and
              notifications anytime, anywhere. Be in the driver’s seat when it
              comes to your car’s health.
            </p>
          </div>
        </div>
      </div>
    </div>
</template>
<script setup>
import { gsap } from 'gsap';
import { SplitText } from 'gsap/SplitText';
import { onMounted } from 'vue';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(SplitText)
gsap.registerPlugin(ScrollTrigger)

onMounted(()=>{
    const elements = gsap.utils.toArray("h2, h3, p")
    const h3s = gsap.utils.toArray("h3")
    const images = gsap.utils.toArray("img")

    elements.forEach((el) => {
        const split = SplitText.create(el, {type:"lines"})
        gsap.fromTo(split.lines,{
            alpha:0,
            rotationX:90,
            rotationY:90
        },{
            alpha:1,
            rotationX:0,
            rotationY:0,
            stagger:0.1,
            transformOrigin:"50% 50% -200",
            scrollTrigger:{
                trigger:el,
                start:"top center",
            }
        })
    })
    h3s.forEach((el,i) => {
        gsap.fromTo(images[i],{
            alpha:0,
            transform:"scale(1.3)"
        },{
            alpha:1,
            transform:"scale(1)",
            scrollTrigger:{
                trigger:el,
                toggleActions:"restart none none reverse",
                start:"top center",
            }
        })
    })
})


</script>
<style scoped>
.overview {
  padding: 50px;
  background-color: #1c1c1c;
  color: #fafafa;
}

.title {
  font-size: 5vw;
  text-align: center;
  line-height: 1.1;
  margin: 5vw 0;
}

.content {
  display: flex;
  align-items: flex-start;
}

.img {
  width: 20vw;
  aspect-ratio: 9 / 16;
  position: sticky;
  top: 3vw;
  border-radius: 20px;
  overflow: hidden;
  img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.text {
  flex: 1;
  margin-left: 5vw;
}

.item {
  border-bottom: 1px solid #bcbcbc;
  padding-top: 50px;
  padding-bottom: 250px;
  h3 {
    font-size: 3vw;
  }
  p:nth-of-type(1) {
    color: #ff4520;
    font-size: 2vw;
    margin-top: 30px;
    margin-bottom: 60px;
  }
  p:nth-of-type(2) {
    font-size: 1.5vw;
    color: #bcbcbc;
  }
}

.item:last-of-type {
  border-bottom: none;
}
</style>
